// 初始化表格
$(document).ready(function () {
  // 初始化 表格
  var table = null
  var timerId = null
  var curRowInfo = null

  // 生成表格-年级学生信息详表
  function createStudentsInfoTable(param) {
    table = $("#t1").DataTable({
      language: {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
          "sFirst": "首页",
          "sPrevious": "上页",
          "sNext": "下页",
          "sLast": "末页"
        },
        "oAria": {
          "sSortAscending": ": 以升序排列此列",
          "sSortDescending": ": 以降序排列此列"
        }
      },
      dom:'<"table-header"Bfr><t><"table-bottom"lp>',
      buttons: [
        {
          text: '新增+',
          className: 'btn btn-primary btn-sm add',
          action: function (e, dt, node, config) {
            // console.log(e)
            // console.log(dt)
            // console.log(node)
            // console.log(config)
            node.eq(0).attr({
              "data-toggle": "modal",
              "data-target": "#exampleModal",
              "data-whatever": param
            })
          }
        }
      ],
      processing: true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
      lengthChange: true,//是否允许用户改变表格每页显示的记录数
      orderMulti: true,  //启用多列排序
      ordering: true,//使用排序
      bStateSave: true,//记录cookie
      destroy: true, // 设为 ture 时通知dataTable函数完全重新建立一个新的控件实例
      paging: true,//是否分页
      pagingType: "full_numbers",//除首页、上一·页、下一页、末页四个按钮还有页数按钮
      stripeClasses: ['table-row'], // 定义一个字符串数组,在显示行的时候依次使用里面的字符串作为行的class
      lengthMenu: [5, 10, 20, 50, 100],
      pageLength: 5,
      searching: true,//是否开始本地搜索
      // stateSave: false,//刷新时是否保存状态
      autoWidth: true,//自动计算宽度
      deferRender: true,//延迟渲染
      // serverSide: true,//开启服务器模式(在服务器端进行分页、查询您等操作)
      sServerMethod: 'get',
      sAjaxSource: `http://localhost:3030/${param}`,
      fnServerData: function (sSource, aoData, fnCallback) {
        $.ajax({
          url: sSource,
          type: 'GET',
          dataType: 'json',
          data: aoData,
          success: (res) => {
            fnCallback({data: res.data, recordsTotal: res.data.length})
          },
          error: (error) => {
            alertTip({
              message: `表格数据请求失败，请检查网络连接 错误代码：${error.code}`,
              type: 'alert-danger'
            })
            fnCallback({data: []})
          }
        })
      },
      //设置各列数据
      // data: 'name', // 不知道这个是干啥使的
      columns: [
        {
          render: function (data, type, row, meta) {
            return meta.row + 1
          }
        },
        {
          defaultContent: " ",
          render: function (data, type, row, meta) {
            return `
              <span title="${row.name}" style="cursor: pointer;">${row.name}</span>
            `
          }
        },
        {data: "sex", defaultContent: "未知性别"},
        {data: "age", defaultContent: 0},
        {data: "birthday", defaultContent: "未知"},
        {
          // maxWidth: '120px',
          render: function (data, type, row, meta) {
            // console.log(data)
            // console.log(type)
            // console.log(row)
            // console.log(meta)
            return `
            <div class="btn-container" style="display: flex; justify-content: space-around; align-items: center;">
                <button type="button" class="btn btn-primary btn-sm change" data-toggle="modal" data-target="#exampleModal" data-whatever="${param}">修改</button>
                <button type="button" class="btn btn-primary btn-sm delete" data-toggle="modal" data-target="#exampleModal"  data-whatever="${param}">删除</button>
            </div>
          `
          }
        }
      ],
      columnDefs: [
        {targets: [0], searchable: false}
      ],
      // 行 的回调函数
      // fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      //   // console.log(nRow)
      //   // console.log(aData)
      //   // console.log(iDisplayIndex)
      //   // console.log(iDisplayIndexFull)
      //   return 'Download'
      // },
    });
  }

  // alert 提示 自动显示隐藏函数
  function alertTip(param) {
    let alert = $('.alert')
    let textTip = $('.alert .text-tip')
    alert.addClass('show')
    alert.addClass(param.type || 'alert-primary')
    textTip.text(param.message || '空的提示信息')
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      alert.removeClass('show')
      alert.removeClass(param.type)
    }, 4000)
  }

  window.alertTip = alertTip

  // 获取模态框内的用户输入信息, 并校验用户输入信息是否合法
  function getUserInfo() {
    let userInfo = {}
    let userName = $('#inputName')
    let userSexMan = $('#inputSexMan')
    let userSexWoman = $('#inputSexWoman')
    let userAge = $('#inputAge')
    let userBirthday = $('#inputBirthday')

    // 校验用户name
    if (!userName.val()) {
      alertTip({
        message: '请输入合法的用户姓名',
        type: 'alert-danger'
      })
      return false
    } else {
      userInfo.name = userName.val()
    }

    // 校验用户sex
    if (!(userSexMan.prop('checked') || userSexWoman.prop('checked'))) {
      alertTip({
        message: '请选择用户性别',
        type: 'alert-danger'
      })
      return false
    } else {
      userInfo.sex = userSexMan.prop('checked') ? userSexMan.val() : userSexWoman.val()
    }

    // 校验用户age
    if (!userAge.val()) {
      alertTip({
        message: '请输入合法的用户年龄',
        type: 'alert-danger'
      })
      return false
    } else if (!Number(userAge.val())) {
      alertTip({
        message: '请输入合法的用户年龄',
        type: 'alert-danger'
      })
      return false
    } else {
      userInfo.age = Number(userAge.val())
    }

    // 校验用户birthday
    if (!userBirthday.val()) {
      // 校验用户输入是否为空
      alertTip({
        message: '请输入合法的用户生日(例如：20201108)',
        type: 'alert-danger'
      })
      return false
    } else if (!Number(userBirthday.val())) {
      // 校验用户输入是否为纯数字字符串
      alertTip({
        message: '请输入合法的用户生日(例如：20201108)',
        type: 'alert-danger'
      })
      return false
    } else if (userBirthday.val().length !== 8) {
      alertTip({
        message: `请检查 '${userBirthday.val()}' 的长度是否为8位`,
        type: 'alert-danger'
      })
      return false
    } else if (userBirthday.val().slice(0, 4) > new Date().getFullYear()) {
      alertTip({
        message: `'${userBirthday.val().slice(0, 4)}' 是不合法的生日年份`,
        type: 'alert-danger'
      })
      return false
    } else if (userBirthday.val().slice(4, 6) > 12 || userBirthday.val().slice(6, 8) > 31) {
      alertTip({
        message: `'${userBirthday.val().slice(4, 6)}月${userBirthday.val().slice(6, 8)}日' 是不合法的日期`,
        type: 'alert-danger'
      })
      return false
    } else {
      userInfo.birthday = userBirthday.val()
    }

    // 校验用户输入的年龄个生日是否匹配
    if (Number(userAge.val()) !== new Date().getFullYear() - userBirthday.val().slice(0, 4)) {
      alertTip({
        message: `生日 '${userBirthday.val()}' 和年龄 '${userAge.val()}' 不匹配`,
        type: 'alert-danger'
      })
      return false
    }
    return userInfo
  }

  // 按条件查询用户信息
  // async function checkUserInfo(grade, info) {
  //   let length = -1
  //   await $.ajax({
  //     url: `http://localhost:3030/${grade}`,
  //     type: 'GET',
  //     data: { ...info },
  //     success: function (res) {
  //       length = res.length
  //     },
  //     error: function (error) {
  //       alertTip({
  //         message: `请检查你的网络是否连接 错误代码：${error.code}`,
  //         type: 'alert-danger'
  //       })
  //     }
  //   })
  //   if (length === 0) {
  //     return true
  //   } else {
  //     alertTip({
  //       message: `"${name}" 该名字在数据库中已存在`,
  //       type: 'alert-warning'
  //     })
  //     return false
  //   }
  // }

  // 发送 新增 请求
  // 先查看数据库 验证 新增用户信息是否与数据库重复
  function sendAddRequest(grade) {
    let params = {}
    if (getUserInfo() === false) {
      return
    } else {
      params = getUserInfo()
    }
    // console.log(params)
    // if (!await checkUserInfo(params.name)) {
    //   return
    // }
    // 发送ajax请求
    $.ajax({
      url: `http://localhost:3030/${grade}`,
      type: 'POST',
      data: {...params},
      // beforeSend: function (http) {
      //   console.log('beforeSend')
      //   console.log(http)
      // },
      // complete: function (data) {
      //   console.log('complete')
      //   console.log(data)
      // },
      success: function (res) {
        // console.log(res)
        if (res.code === 0) {
          alertTip({
            message: '新增成功！',
            type: 'alert-success'
          })
          $('#exampleModal').modal('hide')
          $('#t1').dataTable()._fnAjaxUpdate() // 刷新表格
          $('#totalTable').dataTable()._fnAjaxUpdate()
        } else {
          alertTip({
            message: res.msg,
            type: 'alert-danger'
          })
        }
      },
      error: function (error) {
        alertTip({
          message: `新增失败，错误代码：${error.code}`,
          type: 'alert-danger'
        })
      }
    })
  }

  // 发送 修改 请求
  function sendChgRequest(grade, _id) {
    let params = {}
    if (getUserInfo() === false) {
      return
    } else {
      params = getUserInfo()
    }
    // if (!await checkUserInfo(params.name)) {
    //   return
    // }
    $.ajax({
      url: `http://localhost:3030/${grade}`,
      type: 'PUT',
      data: {_id, ...params},
      success: function (res) {
        // console.log(res)
        if (res.code === 0) {
          alertTip({
            message: '修改成功',
            type: 'alert-success'
          })
          $('#exampleModal').modal('hide')
          $('#t1').dataTable()._fnAjaxUpdate() // 刷新表格
        } else {
          alertTip({
            message: res.msg,
            type: 'alert-danger'
          })
        }
      },
      error: function (error) {
        alertTip({
          message: `修改失败，错误代码：${error.code}`,
          type: 'alert-danger'
        })
      }
    })
  }

  // 发送 删除 请求
  function sendDelRequest(grade, _id) {
    $.ajax({
      url: `http://localhost:3030/${grade}`,
      type: 'DELETE',
      data: {_id},
      success: function (res) {
        // console.log(res)
        if (res.code === 0) {
          alertTip({
            message: '删除成功',
            type: 'alert-success'
          })
          $('#exampleModal').modal('hide')
          $('#t1').dataTable()._fnAjaxUpdate() // 刷新表格
          $('#totalTable').dataTable()._fnAjaxUpdate()
        } else {
          alertTip({
            message: res.msg,
            type: 'alert-danger'
          })
        }
      },
      error: function (error) {
        alertTip({
          message: `删除失败，错误代码：${error.code}`,
          type: 'alert-danger'
        })
      }
    })
  }

  // 填充form表单信息
  function fillFormInfo(type, data) {
    let userName = $('#inputName')
    let userSexMan = $('#inputSexMan')
    let userSexWoman = $('#inputSexWoman')
    let userAge = $('#inputAge')
    let userBirthday = $('#inputBirthday')
    if (type === 'delete' || type === 'change') {
      userName.val(data.name || '')
      userAge.val(data.age || '')
      userBirthday.val(data.birthday || '')
      if (data.sex === '男') {
        userSexMan.prop('checked', 'checked')
      } else if (data.sex === '女') {
        userSexWoman.prop('checked', 'checked')
      }
    }
    // 如果type === ‘delete’ 禁止操作表单
    if (type === 'delete') {
      userName.prop('disabled', 'disabled')
      userSexMan.prop('disabled', 'disabled')
      userSexWoman.prop('disabled', 'disabled')
      userAge.prop('disabled', 'disabled')
      userBirthday.prop('disabled', 'disabled')
    } else { // 不是 delete 解除禁止
      userName.removeAttr('disabled')
      userSexMan.removeAttr('disabled')
      userSexWoman.removeAttr('disabled')
      userAge.removeAttr('disabled')
      userBirthday.removeAttr('disabled')
    }
  }

  // 监听行的 button 点击事件
  $('#t1').off('click').on('click', 'button', function (event) {
    let tr = $(this).parentsUntil('tr').filter('td').parent().get(0)
    curRowInfo = table.row(tr).data()
  })

  // 监听example模态框的 显示/隐藏
  $('#exampleModal')
      .on('show.bs.modal', function (event) {
        let submitBtn = $('#exampleModal .modal-footer .submit')
        // 修改 modal 的 header
        let btnExpModal = $(event.relatedTarget)
        let btnClassName = btnExpModal[0].className
        let grade = btnExpModal.data('whatever')
        let exampleModal = $(this)
        // 判断用户的操作类型（新增 修改 删除）
        // 注意：这里先 off 取消事件绑定 是因为下文中也给同意dom绑定了同一事件
        // 如果不使用off 前一个click事件还是会执行的，所以以后要养成良好习惯，监听事件 同时也要记得清除事件
        if (btnClassName.includes('add')) {
          exampleModal.find('.modal-title').text('新增用户信息')
          exampleModal.find('#userInfoForm').css({display: 'block'})
          exampleModal.find('.tip-info').css({display: 'none'})
          fillFormInfo('add')
          submitBtn.off('click').click(async (event) => {
            await sendAddRequest(grade)
          })
        } else if (btnClassName.includes('change')) {
          exampleModal.find('.modal-title').text('修改用户信息')
          exampleModal.find('#userInfoForm').css({display: 'block'})
          exampleModal.find('.tip-info').css({display: 'none'})
          fillFormInfo('change', curRowInfo)
          submitBtn.off('click').click(async (event) => {
            await sendChgRequest(grade, curRowInfo._id)
          })
        } else if (btnClassName.includes('delete')) {
          exampleModal.find('.modal-title').text('删除用户信息')
          exampleModal.find('#userInfoForm').css({display: 'none'})
          exampleModal.find('.tip-info').css({display: 'block'})
          // fillFormInfo('delete', curRowInfo)
          submitBtn.off('click').click((event) => {
            sendDelRequest(grade, curRowInfo._id)
          })
        } else {
          alertTip({
            message: '未知的用户的操作类型',
            type: 'alert-danger'
          })
        }
      })
      .on('hidden.bs.modal', function (event) {
        // 当模态框关闭时重置模态框数据
        $('#userInfoForm')[0].reset()
      });

  // 监听studentsInfo（年级学生信息）模态框的显示 / 隐藏
  $('#studentsInfoModal')
      .on('show.bs.modal', function (event) {
        let btnExpModal = $(event.relatedTarget)
        let dataWhatever = btnExpModal.data('whatever')
        let modalTitle = $(this).find('.modal-title')
        // console.log(modalTitle.text())
        let param = ''
        switch (dataWhatever) {
          case 0:
            param = 'freshman'
            modalTitle.text('大一年级学生信息表')
            createStudentsInfoTable(param)
            return;
          case 1:
            param = 'sophomore'
            modalTitle.text('大二年级学生信息表')
            createStudentsInfoTable(param)
            return;
          case 2:
            param = 'junior'
            modalTitle.text('大三年级学生信息表')
            createStudentsInfoTable(param)
            return;
          case 3:
            param = 'senior'
            modalTitle.text('大四年级学生信息表')
            createStudentsInfoTable(param)
            return;
          default:
            alertTip({
              message: `${dataWhatever} 是未知的时间源，请联系开发人员`,
              type: 'alert-danger'
            })
            return;
        }
      })
});
